import React, { useState, useEffect, FC, useRef } from 'react'
import {
  Row, Col, Card,
  Modal,
  Form,
  Spin,
  Select
} from 'antd'
import XlButtonFC from '@/components/xlbutton/xlbutton'
import { DefaultOptionType } from 'antd/lib/select'
import XlModalFC from '@/components/xlmodal/xlmodal'
import { IAllUserModel, IData, IResponseCodeType } from '@/models/common'
import util from '@/utils/util'
import * as api from '@/api'
import "./fileownerswitch.scss"
export interface IViewModel {
  pageLoading: boolean
  user_list: DefaultOptionType[]
  user2: string
  user1: string
  notAuth: boolean
}
const FileOwnerSwitch: FC = () => {

  const [data, setData] = useState<IData<IViewModel>>({
    ViewModel: {
      pageLoading: false,
      user_list: [],
      user2: "",
      user1: "",
      notAuth: false
    }
  })

  useEffect(() => {
    
  }, [])

  const events = {
    onClickOk() {
      const { user1, user2 } = data.ViewModel
      if (!user1) {
        util.alertTip('请选择原所有者')
        return
      }
      if (!user2) {
        util.alertTip('请选择现所有者')
        return
      }
      if (user1 == user2) {
        util.alertTip('原所有者和现所有者不能相同')
        return
      }
      Modal.confirm({
        title: '文件所有者转移',
        centered: true,
        closable: true,
        content: '确认转移吗？',
        onOk() {
          return new Promise(async (resolve, reject) => {
            await methods.requestEditDocumentOwner()
            resolve(null)
          }).catch(() => console.log('Oops errors!'))
        },
        onCancel() {

        },
      })
    },
    onUser1Change(value: string) {
      const { ViewModel } = data
      ViewModel.user1 = value
      setData({ ...data })
    },
    onUser2Change(value: string) {
      const { ViewModel } = data
      ViewModel.user2 = value
      setData({ ...data })
    },
  }

  const methods = {
    async getAllUserList() {
      const { ViewModel } = data
      let res = await api.common.getAllUserList<IAllUserModel>(null)
      const { code, data: AllUserData, message } = res
      if (code == IResponseCodeType.Success) {
        ViewModel.user_list = AllUserData.user_list || []
      } else if (code == IResponseCodeType.NotAuth) {
        ViewModel.notAuth = true
      } else {
        util.alertTip(message)
      }
      ViewModel.pageLoading = false
      setData({ ...data })
    },
    async requestEditDocumentOwner() {
      const { user1, user2 } = data.ViewModel
      let res = await api.common.editDocumentOwner<null>({
        source_owner: user1,
        target_owner: user2
      })
      const { code, message } = res
      util.alertTip(message)
      if (code == IResponseCodeType.Success) {

      }
    },
    renderPage() {
      if (data.ViewModel.notAuth) {
        return null
      }
      return <>
        <Spin spinning={data.ViewModel.pageLoading}>
          <Card title='文件所有者转移'>
            <Form
              className="fileownerswitch-card-wrapper"
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 5 }}
              autoComplete="off"
            >
              <Form.Item
                label="原所有者"
                required
              >
                <Select placeholder='请选择原所有者' allowClear value={data.ViewModel.user1 || undefined} onChange={events.onUser1Change} options={data.ViewModel.user_list} />
              </Form.Item>
              <Form.Item
                label="现所有者"
                required
              >
                <Select placeholder='请选择现所有者' allowClear value={data.ViewModel.user2 || undefined} onChange={events.onUser2Change} options={data.ViewModel.user_list} />
              </Form.Item>
              <Form.Item
                wrapperCol={{ offset: 4, span: 5 }}
              >
                <XlButtonFC type='primary' onClick={() => events.onClickOk()}>
                  确定
                </XlButtonFC>
              </Form.Item>
            </Form>
          </Card>
        </Spin>
      </>
    }
  }
  return methods.renderPage()
}
export default FileOwnerSwitch
